<script setup lang="ts">
import MyButton from './components/MyButton.vue'
</script>

<template>
  <div class="app">
    <h1>Vue Slot 最简单示例</h1>
    
    <div class="demo-section">
      <h2>什么是 Slot？</h2>
      <p>Slot（插槽）允许父组件向子组件传递内容。</p>
    </div>

    <div class="demo-section">
      <h2>示例演示：</h2>
      
      <!-- 示例1：在 MyButton 组件标签之间传入文本 -->
      <MyButton>点击我</MyButton>
      
      <!-- 示例2：传入不同的文本 -->
      <MyButton>提交</MyButton>
      
      <!-- 示例3：传入 HTML 内容 -->
      <MyButton>
        <span>❤️</span> 收藏
      </MyButton>
      
      <!-- 示例4：传入更复杂的内容 -->
      <MyButton>
        <strong>加粗的</strong> 按钮
      </MyButton>
    </div>

    <div class="explanation">
      <h2>工作原理：</h2>
      <ol>
        <li>子组件 MyButton.vue 中定义了 <code>&lt;slot&gt;&lt;/slot&gt;</code></li>
        <li>父组件在使用 <code>&lt;MyButton&gt;</code> 时，标签之间的内容会被传递到子组件</li>
        <li>子组件的 <code>&lt;slot&gt;</code> 会被替换为父组件传递的内容</li>
      </ol>
    </div>
  </div>
</template>

<style scoped>
.app {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

h1 {
  color: #42b983;
  text-align: center;
}

.demo-section {
  margin: 30px 0;
}

h2 {
  color: #35495e;
  margin-bottom: 15px;
}

button {
  margin: 10px;
}

.explanation {
  background-color: #f4f4f4;
  padding: 20px;
  border-radius: 8px;
  margin-top: 30px;
}

.explanation ol {
  line-height: 1.8;
}

.explanation code {
  background-color: #e8e8e8;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
}

p {
  font-size: 16px;
  color: #666;
}
</style>
